<template>
  <div class="app-container dashboard-container">
    <div class="head-container dashboard-editor-container">
      <div >
        <!-- 搜索 -->
        <el-select v-model="query.daTaskId" clearable filterable placeholder="任务" class="filter-item">
          <el-option
            v-for="item in task.da_task"
            :key="item.id"
            :label="item.serialnumber"
            :value="item.id" />
        </el-select>
        <el-select v-model="query.daEquipmentId" clearable filterable placeholder="设备" class="filter-item">
          <el-option
            v-for="item in equipment.da_equipment"
            :key="item.id"
            :label="item.name"
            :value="item.id" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        
          <Line3D :line3DataC="line3Data" v-if="isRouterShow"/>
        
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="chart-wrapper">
            <Line2Dxh :line3DataC="line3Data" v-if="isRouterShow"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-wrapper">
            <Line2Dyh :line3DataC="line3Data" v-if="isRouterShow"/>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import crudDaSubtask from '@/api/daSubtask'
import Line3D from '@/components/Echarts/Line3D01'
import Line2Dxh from '@/components/Echarts/Line2Dxh'
import Line2Dyh from '@/components/Echarts/Line2Dyh'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { getToken } from '@/utils/auth'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '数据导入', url: 'api/daSubtask/getDaSubtaskData', sort: 'id,desc', crudMethod: { ...crudDaSubtask }})
export default {
  name: 'Echarts',
  components: { pagination, rrOperation, udOperation, Line3D, Line2Dxh, Line2Dyh},
  mixins: [presenter(defaultCrud), header(), crud()],
  tasks: [],
  equipments: [],
  provide () {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      permission: {
        add: ['admin', 'daSubtask:add'],
        edit: ['admin', 'daSubtask:edit'],
        del: ['admin', 'daSubtask:del']
      },
      rules: {
      },
      headers: {
        'Authorization': getToken()
      },
      line3Data: this.crud.data,
      isRouterShow: true
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }
      return true
    },
    [CRUD.HOOK.afterRefresh]() {
      this.line3Data = this.crud.data;
      // console.log("121q",this.line3Data);
      this.reload()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    async reload () {
      this.isRouterShow = false
      await this.$nextTick()
      this.isRouterShow = true
    }
  },
  
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
